<template>
    <view>
        <cu-custom bgColor="bg-gradual-green" isBack="true">
            <block slot="content">订单与发票管理</block>
            <block slot="backText">返回</block>
        </cu-custom>

        <P v-for="(order, index) of orderList" :key="index">
            <weapp-card bg-color="white"
            :button-color="getButtonColor(order)"
            :button-name="getButtonName(order)"
            @click-button="clickInvoiceButton(order)"
            :tags="getTags(order)">
                <template v-slot:title>
                    <view class="flex justify-between">
                        <view class="text-cut">{{ order.pay_time }}</view>
                        <view> ￥{{ order.amount }} </view>
                    </view>
                </template>
                <template v-slot:content>
                    <view> {{ order.order_content }} </view>
                </template>
            </weapp-card>
        </P>
    </view>
</template>

<script>
import weappCard from '@/components/weapp-card/weapp-card';
import {ORDER_API} from '@/API.js';
export default {
    components: {
        weappCard
    },
    data() {
        return {
            orderList: [],
        };
    },
    onShow() {
        uni.request({
            url: ORDER_API.orderList.url,
            method: ORDER_API.orderList.method,
            header: {'http-token': this.getToken()},
            success: function(res) {
                console.log(res);
                this.orderList = res.data;
            }.bind(this)
        });
    },
    methods: {
        clickInvoiceButton: function(order) {
            var para;
            if (order.status == '未开具') {
                para = 'swift_id=' + order.swift_id;
                uni.navigateTo({
                    url: 'applyinvoice/applyInvoice?' + para,
                    success: function() { console.log('ok'); },
                    fail: function() { console.log('fail'); },
                    complete: function() {}
                });
            }
            else if (order.status == '已开具') {
                para = 'com=' + order.express_channel + '&num=' + order.express_number;
                uni.navigateTo({
                    url: 'logistics/logistics?' + para,
                    success: function() { console.log('ok'); },
                    fail: function() { console.log('fail'); },
                    complete: function() {}
                });
            }
        },
        getTags: function(order) {
            return [
                {
                    content: order.pay_channel,
                    color: 'blue'
                },
                {
                    content: order.status,
                    color: (order.status == '已开具' ? 'green' :
                        order.status == '开票中' ? 'orange' : 'red')
                }
            ];
        },
        getButtonColor: function(order) {
            if (order.status == '已开具')
                return 'green';
            else
                return 'blue';
        },
        getButtonName: function(order) {
            if (order.status == '已开具')
                return '查看物流';
            if (order.status == '未开具')
                return '申请发票';
            return null;
        }
    }
};
</script>

<style>
    .item_content {
        font-size: 50rpx;
        width: 20%;
        word-break: break-all;
        word-wrap: break-word;
    }

    .line_div_thin {
        width: 100%;
        height: 50rpx;
        background-color: #C8C7CC;
    }
</style>
